<template>
  <div>
    <!-- 有卡消费
        会员卡录入表
        
      
      
      
    -->
    <h1>有卡消费</h1>
    <el-button type="text" @click="dialogFormVisible = true">添加会员</el-button>

    <el-dialog title="会员信息录入表" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="会员编号" :label-width="formLabelWidth">
          <el-input v-model="form.member_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员名称" :label-width="formLabelWidth">
          <el-input v-model="form.member_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员等级" :label-width="formLabelWidth">
          <el-select v-model="form.member_level" placeholder="请选择会员等级">
            <el-option label="无" value="无"></el-option>
            <el-option label="普通会员" value="普通会员"></el-option>
            <el-option label="白银会员" value="白银会员"></el-option>
            <el-option label="黄金会员" value="黄金会员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth">
          <el-input v-model="form.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="form.remaining_sum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 确定按钮上有两个功能一个：让弹窗消失 另一个：发送post请求提交数据
        v-on绑定多个事件：
        多个相同事件：
        多个不同事件：
        另一种思路： 把两个事儿变成一个事件
        -->
        <!-- <el-button type="primary" @click="dialogFormVisible = false,commitPost()">确 定</el-button> -->
        <el-button type="primary" @click="commitPost">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 表格 -->
    <!-- 什么时候发送ajax，根据逻辑来定
    当前订的逻辑是一点击有卡消费，table表格中马上出现数据
    ajax请求放到了mounted created中
    vue声明周期钩子函数
    
    -->
    <!-- 
      搜索框的逻辑
      如果输入01  table中显示01 高金哲
      如果输入02  table中显示02 孟晓鹏
      意味 输入01  tableData中的数据换了 换成了 高金哲  



    -->
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入会员卡号" class="inp"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-light">
          <el-button icon="el-icon-search" circle @click="search"></el-button>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="member_id" label="会员编号" width="180"></el-table-column>
      <el-table-column prop="member_name" label="会员名称" width="180"></el-table-column>
      <el-table-column prop="member_level" label="会员等级"></el-table-column>
      <el-table-column prop="money" label="充值金额"></el-table-column>
      <el-table-column prop="discount" label="折扣"></el-table-column>
      <el-table-column prop="remaining_sum" label="余额"></el-table-column>
    </el-table>
  </div>
</template>

<script>
// 发送post请求  axios
// 不一定  有的人api ajax  request.js  有的 utils ajax request
import ajax from "../api/ajax";
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        member_id: "",
        member_name: "",
        member_level: "",
        money: 0,
        discount: 1,
        remaining_sum: 0
      },
      formLabelWidth: "120px",
      tableData: [],
      input: "",
      memberInfo: []
    };
  },
  async mounted() {
    // 发送请求得到数据，一定要考虑这些数据是
    // 哪个组件用，就放到哪个组件中
    // 如果是父子组件用，就放到父组件中
    // 如果是很多组件用，放到vuex中'

    const url = "/api/member_search";
    const result = await ajax(url, "get", "", "json");
    console.log(result.data);
    this.tableData = result.data;
    this.memberInfo = result.data;
    //
  },
  methods: {
    async commitPost() {
      this.dialogFormVisible = false;
      console.log(1111);
      // url, method, params, headType
      const url = "/api/member_info";
      const params = {
        member_id: this.form.member_id,
        member_name: this.form.member_name,
        member_level: this.form.member_level,
        money: this.form.money * 1,
        discount: this.form.discount * 1,
        remaining_sum: this.form.remaining_sum * 1
      };
      // 异步操作
      let result = await ajax(url, "post", params, "form");
      console.log(result);
    },
    search() {
      // 点击btn按钮得到 input框输入的值
      console.log(this.input);
      // this.tableData  删选 从后台请求回来的数据
      // [{},{}]从这样的数组中删选数据 member_id  数组过滤
      let result = this.memberInfo.filter(item => {
        return item.member_id == this.input;
      });
      console.log(result);
      // 一定要注意result的数据类型
      this.tableData = result;
    }
  }
};
</script>

<style>
</style>
